<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg" onload="init()">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-adverinfo-edit" th:object="${adverinfo}">
            <input id="advertinfoId" name="advertinfoId" th:field="*{advertinfoId}"  type="hidden">
			<input id="imgPath" name="imgPath" th:field="*{imgPath}"  type="hidden">
			<div class="form-group">	
				<label class="col-sm-3 control-label">广告标题：</label>
				<div class="col-sm-8">
					<input id="biaoTi" name="biaoTi" th:field="*{biaoTi}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">广告链接：</label>
				<div class="col-sm-8">
					<input id="lianJie" name="lianJie" th:field="*{lianJie}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">显示顺序：</label>
				<div class="col-sm-8">
					<input id="shunXu" name="shunXu" th:field="*{shunXu}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">广告状态：</label>
				<div class="col-sm-8">
					<div class="onoffswitch">
						<input type="checkbox" th:checked="${adverinfo.status == '0' ? true : false}" class="onoffswitch-checkbox" id="status" name="status">
						<label class="onoffswitch-label" for="status">
							<span class="onoffswitch-inner"></span>
							<span class="onoffswitch-switch"></span>
						</label>
					</div>

				</div>
			</div>
			<!-- 照片添加 -->
			<div class="container">
				<div class="avatar-upload">
					<div class="avatar-edit">
						<input type='file' name="imgPath"  id="imageOne" accept=".png, .jpg, .jpeg"/>
						<label for="imageOne"></label>
					</div>
					<div class="avatar-preview">
						<img alt="image" id="oldPic" class="img-circle m-t-xs img-responsive" th:src="(${adverinfo.imgPath} == '') ? @{/img/profile.jpg} : @{/profile/guanggao/} + ${adverinfo.imgPath}"  style="width: 300px;height: 300px"/>
						<div id="imageOnePreview" style="background-image: url();width: 550px;height: 330px;">

						</div>
					</div>
				</div>
			</div>
		</form>
    </div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		function init(){
			var val2 = $("#imgPath").val();

			$("#imageOnePreview").css("background-image","url("+val2+")");
		}
		var cropper;
		var prefix = ctx + "system/adverinfo";
		$("#form-adverinfo-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});

		function submitHandler() {
			if ($.validate.form()) {

				$.operate.save(prefix + "/edit", $('#form-adverinfo-edit').serialize());
			}
		}
		function submitHandler() {
			if ($.validate.form()) {
				uploadFile();
			}
		}
		function uploadFile() {
			var formData = new FormData();
			if ($('#imageOne')[0].files[0] == null) {
				$.modal.alertWarning("请先选择要上传的图片");
				return false;
			}
			formData.append('advertinfoId', $("#advertinfoId").val());
			formData.append('biaoTi', $("#biaoTi").val());
			formData.append('lianJie', $("#lianJie").val());
			formData.append('shunXu', $("#shunXu").val());
			formData.append('status', $("#status").val());
			formData.append('imgPath', $("#imgPath").val());
			formData.append('files', $('#imageOne')[0].files[0]);
			$.ajax({
				url: prefix + "/add",
				type: 'post',
				cache: false,
				data: formData,
				processData: false,
				contentType: false,
				dataType: "json",
				success: function(result) {
					$.operate.successCallback(result);
				}
			});
		}
		$("#imageOne").change(function() {

			readURLOne(this);
		});

		function readURLOne(input) {
			if (input.files[0]) {
				var reader = new FileReader();
				reader.onload = function(e) {
					$('#oldPic').hidden;
					$("#oldPic").attr("style","display:none");
					/*$("#imageOnePreview").attr("style","display:inline-block");*/
					$('#imageOnePreview').css('background-image', 'url('+e.target.result +')');
					$('#imageOnePreview').hide();
					$('#imageOnePreview').fadeIn(650);
				}
				cropper = reader.readAsDataURL(input.files[0]);
			}
		}
	</script>
</body>
</html>
